import React, {Component} from 'react';
import ReactDOM from 'react-dom';

const withLoading = loadingMessage=>OldComponent=>{
  return class NewComponent extends React.Component {
    show = () => {
      const div = document.createElement('div');
      div.innerHTML = `<p id='loading' style='position:absolute;top:50%;left:50%;z-index:10;background-color:pink;'>${loadingMessage}</p>`
      document.body.appendChild(div);
    };
    hide = ()=>{
      document.getElementById('loading').remove();
    }
    render() {
      const extraProps = {show:this.show,hide:this.hide}
      return <OldComponent {...this.props} {...extraProps}/>;
    }
  }
}

@withLoading('加载中...')
class Hello extends React.Component {
  render() {
    return (
      <div>
        <p>hello</p>
        <button onClick={this.props.show}>显示</button>
        <button onClick={this.props.hide}>隐藏</button>
      </div>
    )
  }
}

// @withLoading('加载中...')
// class Hello extends React.Component
//↕ 等价于
// const newLoading = withLoading('加载中...');
// const NewHello = newLoading(Hello)

ReactDOM.render(<Hello/>, document.getElementById('root'));
